<template>
  <div class="venus-list-page">
    <!--签约查询界面-->
    <div class="page-search">
      <el-form
        label-width="160px"
        style="margin: 20px 50px 20px 0px;"
        size="mini"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="资产类别:">
              <el-select v-model="queryForm.t8_sys_adtype_id" 
                placeholder="请输入资产类别"
                filterable
                clearable>
                <el-option
                  v-for="item in dict.t8_sys_adtype_id"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="资产代码:">
              <el-input
                v-model="queryForm.ftool_code"
                placeholder="请输入资产代码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="资产负债名称:">
              <el-input
                v-model="queryForm.ftool_name"
                placeholder="请输入资产负债名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发生日期(起):">
              <el-date-picker
                v-model="queryForm.start_date"
                type="date"
                class="venus-input-middle venus-input-date"
                value-format="yyyyMMdd"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发生日期(止):">
              <el-date-picker
                v-model="queryForm.end_date"
                type="date"
                class="venus-input-middle venus-input-date"
                value-format="yyyyMMdd"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="现金确认:">
              <el-select v-model="queryForm.is_confirm" 
                placeholder="请输入现金确认"
                filterable
                clearable>
                <el-option
                  v-for="item in dict.is_confirm"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="会计事件:">
              <el-select v-model="queryForm.event_name" 
                placeholder="请输入会计事件"
                filterable
                clearable>
                <el-option
                  v-for="item in dict.event_name"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="venus-btn-box" style="text-align: center;">
          <el-button type="success" @click="search" size="mini">查询</el-button>
          <el-button type="info" plain @click="resetForm" size="mini">重置</el-button>
        </div>
      </el-form>
    </div>
    <!--    查询列表返显-->
    <div class="page-list">
      <el-row type="flex" justify="space-between" class="page-list-head">
        <div class="title">查询结果</div>
      </el-row>
      <table-pagination
        :table-data="tableData"
        :table-header-config="tableHeaderConfig"
        highlight-current-row
        :total="total"
        :page-size="pageSize"
        :now-page="nowPage"
        :operation-config="operationConfig"
      />
    </div>

    <!-- 模态框 -->

    <!--新增弹出框-->
    <el-dialog :title="dialog.add.title" :visible.sync="dialog.add.formVisible">
      <!-- ref=dlgForm用于验证表单 -->
      <el-form ref="dlgFormAdd" :model="dialog.add.form" size="mini">
        <el-row>
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="资产类别"
              :label-width="dialog.formLabelWidth"
              prop="trustee_longname"
              :rules="dialog.formRules.trustee_longname">
              <el-input v-model="dialog.add.form.trustee_longname" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="资产代码"
              :label-width="dialog.formLabelWidth"
              prop="trustee_longname"
              :rules="dialog.formRules.trustee_longname">
              <el-input v-model="dialog.add.form.trustee_longname" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="资产名称"
              :label-width="dialog.formLabelWidth"
              prop="trustee_longname"
              :rules="dialog.formRules.trustee_longname">
              <el-input v-model="dialog.add.form.trustee_longname" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="会计事件"
              :label-width="dialog.formLabelWidth"
              prop="trustee_longname"
              :rules="dialog.formRules.trustee_longname">
              <el-input v-model="dialog.add.form.trustee_longname" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="理论发生日期"
              :label-width="dialog.formLabelWidth"
              prop="trustee_longname"
              :rules="dialog.formRules.trustee_longname">
              <el-input v-model="dialog.add.form.trustee_longname" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="理论发生金额（元）"
              :label-width="dialog.formLabelWidth"
              prop="trustee_longname"
              :rules="dialog.formRules.trustee_longname">
              <el-input v-model="dialog.add.form.trustee_longname" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="交易面额(元)"
              :label-width="dialog.formLabelWidth"
              prop="trustee_longname"
              :rules="dialog.formRules.trustee_longname">
              <el-input v-model="dialog.add.form.trustee_longname" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="到账日期"
              :label-width="dialog.formLabelWidth"
              prop="trustee_longname"
              :rules="dialog.formRules.trustee_longname">
              <el-input v-model="dialog.add.form.trustee_longname" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="实际发生金额（元）"
              :label-width="dialog.formLabelWidth"
              prop="trustee_longname"
              :rules="dialog.formRules.trustee_longname">
              <el-input v-model="dialog.add.form.trustee_longname" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="success" @click="addOk">确 定</el-button>
        <el-button type="info" plain @click="dlgFormVisible=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as kk from '@/utils/k-utils'
  export default {
    name: 'BondInfo',
    data() {
      return {
        formLabelWidth: '120px',
        dialogFormVisible: false,
        dict:{
          t8_sys_adtype_id:[],
          is_confirm:[
            {value:0,text:'未确认'},
            {value:1,text:'已确认'}
          ],
          event_name:[]
        },
        queryForm: { // 查询表单参数
          t8_sys_adtype_id: '',
          ftool_code: '',
          ftool_name: '',
          start_date:'',
          end_date:'',
          is_confirm:'',
          event_name:''
        },
        addForm: {
          market: '',
          acct_mod: '',
          found_code: '',
          foud_name: '',
          found_type: '',
          trustee: '',
          title: '标题'
        },
        markets: [],
        acctMod: [],
        foundType: [],
        pageSize: 5,
        total: 60,
        nowPage: 1,
        tableData: [], // 表格数据
        tableHeaderConfig: [ // 表头配置
          { prop: 'prod_name', label: '理财产品' },
          { prop: '', label: '资产类别' },
          { prop: '', label: '资产代码' },
          { prop: '', label: '资产名称' },
          { prop: '', label: '会计事件' },
          { prop: '', label: '发生日期' },
          { prop: '', label: '到账日期' },
          { prop: '', label: '理论发生金额（元）' },
          { prop: '', label: '交易面额' },
          { prop: '', label: '确认人' },
          { prop: '', label: '现金确认' }
        ],
        operationConfig: { // 表格操作配置
          fixed: 'left',
          width: 200,
          operationButton: [
            // 每一个操作。value:操作文字；func:回调函数
            { value: '确认', func: this.loadBean }
          ]

        },
        dialog:{
          formLabelWidth: '160px',
          formRules: {
            trustee_code: [
              { required: true, message: '请选择托管行代码', trigger: 'change' }
            ], // 托管行代码
            trustee_name: [
              { required: true, message: '请输入托管行名称', trigger: 'blur' }
            ], // 托管行名称
            trustee_longname: [
              { required: true, message: '请输入托管行全称', trigger: 'blur' }
            ], // 托管行全称
            trustee_country: [
              { required: true, message: '请选择所在地区', trigger: 'change' }
            ], // 所在地区
            trustee_property: [
              { required: true, message: '请选择托管行性质', trigger: 'change' }
            ], // 托管行性质
            trustee_country_name: [
              { required: true, message: '请输入国家名称', trigger: 'blur' }
            ], // 国家名称
            trustee_acct_code: [
              { required: true, message: '请输入组织机构代码', trigger: 'blur' }
            ] // 组织机构代码
          },
          add:{
            title:'资产收息到期调整',
            formVisible:false,
            form: {
              id: '', // 主键
              trustee_code: '', // 托管行代码
              trustee_name: '', // 托管行名称
              trustee_longname: '', // 托管行全称
              trustee_country: '', // 所在地区
              trustee_property: '', // 托管行性质
              trustee_acct_code: '' // 组织机构代码
            }
          }
        }
      }
    },
    mounted() {
      //加载资产类别
      kk.k_load_exeid('intserv','M8291EQ003').then(rep=>{
        this.dict.t8_sys_adtype_id=rep.rows;
      });
      //加载会计事件
      kk.k_load_exeid('intserv','M8INTSERV-ACCDICT001').then(rep=>{
        this.dict.event_name=rep.rows;
      });
    },
    methods: {
      
      search() { // 查询函数
        for (let i = 0; i < 5; i++) {
          this.tableData.push(
            { order: '1' }
          )
        }
        this.total = 30
        this.nowPage = 1
      },
      myModify(item, index) {
        console.log(item, index, '-----编辑对象')
      },
      myDelete(item, index) {
        console.log(item, index, '-----删除对象')
      },
      addBean: function() {
        this.dialogFormVisible = true
      },
      search: function() {

      },
      resetForm: function() {

      },
      loadBean() {
        this.dialog.add.formVisible = true
      }

    }
  }
</script>

<style scoped>
</style>
